.flow-variable-setting {
  height: 100%;
  display: flex;
  flex-direction: column;

  .variable-head {
    display: flex;
    flex-direction: column;
    padding: 16px 12px 8px;
    .add-temp-variable {
      margin-bottom: 12px;
      font-size: 12px;
    }

    .variable-search-input {
    }
  }

  .ant-tree{
    font-size: 13px;
    .ant-tree-treenode{
      width: 100%;
    }
    .ant-tree-node-content-wrapper{
      flex: 1;
      width: 0;
      padding: 0;
    }
  }

  .variable-body {
    flex: 1;
    overflow: auto;
    padding: 8px;

    .custom-tree-node {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .custom-tree-node-label {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        .custom-tree-node-name {
          font-size: 12px;
          color: #999;
          margin-left: 6px;
        }
      }

      .tree-node-action {
        display: none;
        color: #1890ff;
        cursor: pointer;
      }

      &:hover {
        .tree-node-action {
          display: block;
        }
      }
    }
  }
} 